<template>
     <div class="common-layout">
        <el-container>
            <el-header class="header_activate">
                <h1>会员激活审核</h1>
                <div class="search_activate" id="top_position"> 
                    <el-input v-model="state.input_user" placeholder="请输入手机或真名" />
                    <el-button type="warning" :icon="Search" @click="searchUserApplicationHandle"></el-button> 
                </div>
                <div class="filter">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            时间筛选
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                        </span>
                        <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="0">天数不限</el-dropdown-item>
                            <el-dropdown-item command="7">近7天</el-dropdown-item>
                            <el-dropdown-item command="15">近15天</el-dropdown-item>
                            <el-dropdown-item command="30" divided>近30天</el-dropdown-item>
                            <el-dropdown-item command="90" disabled>近90天</el-dropdown-item>
                            <el-dropdown-item command="180">近半年</el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-divider />
            <el-main>
                <el-table class="tableClass" :data="state.applicationList" stripe                   
                    :header-cell-style="{ background: '#eef1f6', color: '#606266' }"                    
                     border
                >                    
                    <el-table-column type="index" width="45" label="序" />
                    <el-table-column width="100" property="user_info.real_name" label="姓名" />
                    <el-table-column width="60" property="user_info.is_teacher" label="教师" />
                    <el-table-column width="100" property="user_info.is_active_cn" label="激活状态" />
                    <el-table-column width="120" property="add_date" label="日期"/>
                    <el-table-column width="150" property="user_info.phone" label="手机" show-overflow-tooltip />
                    <el-table-column width="80" property="status_info.name" label="结果"/>
                    <el-table-column align="center" width="100" label="操作" >                        
                        <template #default="scope"> 
                            <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="同意"
                            placement="top"
                            >
                                <el-icon style="width: 1em; height: 1em; margin-right: 10px" @click="handleAgree(scope.$index)">
                                    <Select />
                                </el-icon>
                            </el-tooltip>
                            <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="拒绝"
                            placement="top"
                            >
                                <CloseBold style="width: 1em; height: 1em; margin-left: 10px" @click="handleReject(scope.$index)" />
                            </el-tooltip>
                            <el-tooltip
                            class="box-item"
                            effect="light"
                            content="教师"
                            placement="top"
                            >
                                <Avatar style="width: 1em; height: 1em; margin-left: 10px" @click="onClickSetTeacher(scope.$index)" />
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
                <el-pagination
                background
                layout="total, pre, pager, next"
                :total="state.total"                
                :page-size="state.pageSize"            
                @current-change="handleCurrentChange"
                />
            </el-main>
        </el-container>
    </div>
</template>
  
<script setup>
import { Search, Document, ArrowDown, Select, CloseBold, Avatar } from '@element-plus/icons-vue'
import {onMounted,  reactive, toRefs, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'

const state = reactive({
    input_user: '',
    days: 0,
    applicationList: [],
    total: 0, // 总条数
    currentPage: 1, // 当前页
    pageSize: 10, // 分页大小
    lastGetApplicationsMethod: 'default'
})
const getApplicationsByDefault=()=>{
    let params = { 
  
        days: state.days,
        page: state.currentPage,
        size: state.size,
    }
    state.lastGetApplicationsMethod = 'default'
    axios.get(`/AccountManagerModelViewSet/`, {params}).then(res => {
        console.log('获取申请结果：', res)
        if (res.code==200){
            console.log("申请列表：", res)
            state.applicationList = res.data.results
            state.total = res.total
        }else{       
            console.log("error", res.message)
        }
    })
    .catch((error)=>{
        console.log("获取会员激活错误：", error)
    })
}
const getApplicationsBySearch=()=>{
    let params = { 
        user: state.input_user,
        page: state.currentPage,
        size: state.size,
    }
    state.lastGetApplicationsMethod = 'search'
    axios.get(`/AccountManagerModelViewSet/search/`, {params}).then(res => {
        if (res.code==200){
            console.log("搜索结果：", res)       
            state.applicationList = res.data.results
            state.total = res.total
        }else{       
            console.log("error", res.message)
        }
    })
    .catch((error)=>{
        console.log("获取会员激活错误：", error)
    })
}
onMounted(() => {
    getApplicationsByDefault()
})
//设置天数
const handleCommand=(command=7)=>{
    command = parseInt(command)
    state.days = command
    getApplicationsByDefault()
}
// 同意激活
const handleAgree=(index)=>{
    // console.log("处理同意")
    let params = {
        id: state.applicationList[index].id,  
        operate: 'agree',
        days: state.days,        
    }
    axios.patch(`/AccountManagerModelViewSet/${state.applicationList[index].id}/`, params).then(res => {
        if (res.code==200){
            // console.log("申请列表：", res)
            ElMessage.success("操作成功，同意激活！")            
            reGetApplication()
            scrollToTop()           
        }else if(res.code==1022){
            ElMessage.error("该用户已经激活，此操作没必要！")
        }        
        else{
            console.log("error", res)
        }
    })
    .catch((error)=>{
        console.log("获取会员激活错误：", error)
    })
}
// 拒绝激活
const handleReject=(index)=>{
    // console.log("处理拒绝")
    let params = {
        id: state.applicationList[index].id,
        operate: 'reject',
        days: state.days
    }
    axios.patch(`/AccountManagerModelViewSet/${params.id}/`, params).then(res => {
        if (res.code==200){
            // console.log("申请列表：", res)
            reGetApplication()
            scrollToTop()
        }else if(res.code==1022){
            ElMessage.error("该用户已经禁用，此操作没必要！")
        }        
        else{       
            console.log("error", res)
        }
    })
    .catch((error)=>{
        console.log("获取会员激活错误：", error)
    })
}
// 设置诶教师
const onClickSetTeacher=(index)=>{
    // console.log("设置为教师")
    let is_teacher = state.applicationList[index].user_info.is_teacher
    if (is_teacher == true){
        ElMessage.error("该用户已经是教师类型，此操作没必要！")
        return 0
    }
    let params = {
        id: state.applicationList[index].user_info.id  
    }
    axios.put(`/UserModelViewSet/set_teacher/`, params).then(res => {
        if (res.code==200){
            console.log("设置教师类型成功：", res)
            reGetApplication()
            scrollToTop()
        }else if(res.code==1099){
            ElMessage.error("提交到参数错误！")
        }        
        else{    
            ElMessage.error("其他错误")   
            console.log("error", res)
        }
    })
    .catch((error)=>{
        console.log("设置教师类型错误：", error)
    })
}

const searchUserApplicationHandle=()=>{
    getApplicationsBySearch()
}
// 滚到顶端
const scrollToTop=()=>{
    document.querySelector('#top_position').scrollIntoView(true);
}
//点击页码时触发
const handleCurrentChange = (newPage)=>{
    state.currentPage = newPage 
    reGetApplication()
    scrollToTop()
  }
 // 根据获取方式重新获取申请表
 const reGetApplication=()=>{
    if (state.lastGetApplicationsMethod == 'default'){
       getApplicationsByDefault(0, state.days)
   }else{
       getApplicationsBySearch()
   }
 }
</script>

<style scoped>
  .search_activate {
    display: flex;
    flex-flow: row nowrap;
    /* justify-content: space-between; */
    align-items: center;
    margin: 0 auto;
    height: 30px;
  }
  .header_activate{
    display: flex;
    flex-flow: row nowrap;
    justify-content:flex-start;
    /* align-items: center; */
    padding: 0px;
    height: 30px;
    width:800px;
  }
  span{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: medium;
  }
  .tableClass .cell{   
    padding: 0!important;
    height: 20px!important;
    line-height: 20px!important;
    text-align: center;
    font-size: 10px;
  }
</style>